<template>
  <v-dialog max-width="600px" v-model="dialog">
    <v-btn flat slot="activator" class="success">Add new project</v-btn>
    <v-card>
      <v-card-title>
        <h2>Add a New Project</h2>
      </v-card-title>
      <v-card-text>
        <!-- 表单 -->
        <v-form class="px-3" ref="form">
          <!-- lineedit -->
          <v-text-field
            label="Title"
            id="id"
            v-model="title"
            prepend-icon="folder"
            :rules="inputRules"
          ></v-text-field>
          <!-- textarea -->
          <v-textarea label="Information" v-model="content" prepend-icon="edit" :rules="inputRules"></v-textarea>
          <!-- 日历 -->
          <v-menu>
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="formattedDate"
                label="Date"
                prepend-icon="event"
                readonly
                v-on="on"
              />
            </template>
            <v-date-picker v-model="due" no-title scrollable></v-date-picker>
          </v-menu>
          <!-- 提交按钮 -->
          <v-btn flat class="success mx-0 mt-3" @click="submit" :loading="loading">Add</v-btn>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      content: "",
      due: "",
      inputRules: [v => v.length >= 3 || "Minimum length is 3 characters!"],
      loading: false,
      dialog: false
    };
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        alert(this.title + this.content);
        this.loading = false;
        this.dialog = false;
        this.$emit("projectAdded");
      }
    }
  },
  computed: {
    formattedDate() {
      return this.due ? this.due : "1970-01-01";
    }
  }
};
</script>

